/*
 * Copyright (c) 2021 minglong@iscas.ac.cn
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this list of
 *    conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright notice, this list
 *    of conditions and the following disclaimer in the documentation and/or other materials
 *    provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its contributors may be used
 *    to endorse or promote products derived from this software without specific prior written
 *    permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
<template>
  <div class="markdown-body">
    <member />

    <ACard
      style="width:100%;min-height:500px"
      title="捐赠人"
      :tab-list="tabListNoTitle"
      :active-tab-key="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <p v-if="noTitleKey === 'class_A'">
        <p>有权指派一名代表参加工作委员会，该代表具有提案权及投票权</p>
        <p>有权指派一名代表列席技术指导委员会</p>
        <p>有机会参与兼容性测试组工作</p>
        <p>对OpenHarmony项目群相关工作的批评建议和监督权</p>
        <p>有权参与OpenHarmony项目群组织的其他会议和活动</p>
        <p>有权获得OpenHarmony项目群刊物和技术资料</p>
        <p>有权获取OpenHarmony项目群兼容性测试指导</p>
        <p>有权在OpenHarmony项目群官网进行品牌展示</p>
      </p>
      <p v-if="noTitleKey === 'class_A_Bak'">
        <p>考察期结束后参加A类捐赠人竞选</p>
        <p>可提名一名代表列席工作委员会，有提案权</p>
        <p>有机会参与工作委员会、技术指导委员会、兼容性测试组之外的其他工作组</p>
        <p>有权参与OpenHarmony项目群组织的其他会议和活动</p>
        <p>有权获得OpenHarmony项目群刊物和技术资料</p>
        <p>有权获取OpenHarmony项目群兼容性测试指导</p>
        <p>有权在OpenHarmony项目群官网进行品牌展示</p>
      </p>
      <p v-else-if="noTitleKey === 'class_B'">
        <p>可提名一名代表参与工作委员会B类捐赠人代表选举，当选的代表具有工作委员会提案权及投票权</p>
        <p>有机会参与工作委员会、技术指导委员会、兼容性测试组之外的其他工作组</p>
        <p>有权参与OpenHarmony项目群组织的其他会议和活动</p>
        <p>有权获得OpenHarmony项目群刊物和技术资料</p>
        <p>有权获取OpenHarmony项目群兼容性测试指导</p>
        <p>有权在OpenHarmony项目群官网进行品牌展示</p>
      </p>
      <p v-else-if="noTitleKey === 'class_C'">
        <p>均有权参与本项目组织的除工作委员会、技术指导委员会、兼容性测试组、其他工作组之外的其他活动和会议</p>
        <p>有权获得OpenHarmony项目群刊物和技术资料</p>
        <p>有权获取OpenHarmony项目群兼容性测试指导</p>
        <p>有权在OpenHarmony项目群官网进行品牌展示</p>
      </p>
      <p v-else-if="noTitleKey === 'class_Sp'">
        <p>特殊捐赠人权利和A类捐赠人相同</p>
      </p>
    </ACard>

    <ACard title="成员单位列表" :bordered="false" style="padding: 20px;">
      <h2 style="text-align:center">A 类捐赠人</h2>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/PATEO.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/HUAWEI.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/JD_LOGO.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/润和软件.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/ECARX.svg" />
      </CardGrid>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/中软国际-logo.svg" />
      </CardGrid>
    </ACard>
    <ACard>
      <h2 style="text-align:center">A 类候选捐赠人</h2>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/tuowei.png" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/仙翁科技-logo.svg" />
      </CardGrid>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/Droi.svg" />
      </CardGrid>
    </ACard>
    <ACard>
      <h2 style="text-align:center">B 类捐赠人</h2>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/软通动力-logo.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/东方创科-logo.svg" />
      </CardGrid>
    </ACard>
    <ACard>
      <h2 style="text-align:center">C 类捐赠人</h2>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/华秋-logo.svg" />
      </CardGrid>
      <CardGrid style="width:25%;max-height:100px;text-align:center">
        <img src="/images/members/思必拓-logo.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/东软-logo.svg" />
      </CardGrid>
      <CardGrid style="width:25%;text-align:center">
        <img src="/images/members/wanlihong-logo.svg" />
      </CardGrid>
      </ACard>
      <ACard>
        <h2 style="text-align:center">特殊捐赠人</h2>
        <CardGrid style="width:25%;text-align:center">
          <img src="/images/members/中科院软件研究所logo.svg" />
        </CardGrid>
        <CardGrid style="width:25%;text-align:center">
          <img src="/images/members/中国信通院logo.svg" />
        </CardGrid>
      </ACard>

  <a-button type="primary" class="my-4" @click="send" block> 申请成员 </a-button>
  <MemberApplicationDrawer @register="register4member" />
</div>
</template>

<script>
import member from './member.md'
import { Card } from 'ant-design-vue';
import { useDrawer } from '/@/components/Drawer';
import MemberApplicationDrawer from './MemberApplicationDrawer.vue';
import 'highlight.js/styles/github.css';
import 'github-markdown-css';

export default {
  components: {
    member,
    ACard: Card,
    CardMeta: Card,
    CardGrid: Card.Grid,
    MemberApplicationDrawer,
  },
  setup() {
    const [register4member, { openDrawer: openDrawer }] = useDrawer();
    function send() {
      openDrawer(true, {
        data: 'content',
        info: 'Info',
      });
    }
    return {
      register4member,
      send,
    };
  },
  data() {
    return {
      tabListNoTitle: [
        {
          key: 'class_A',
          tab: 'A 类捐赠人',
        },
        {
          key: 'class_A_Bak',
          tab: 'A 类候选捐赠人',
        },
        {
          key: 'class_B',
          tab: 'B 类捐赠人',
        },
        {
          key: 'class_C',
          tab: 'C 类捐赠人',
        },
        {
          key: 'class_Sp',
          tab: '特殊捐赠人',
        },
      ],
      key: 'class_A',
      noTitleKey: 'class_A',
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    handleDrawerClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    onSubmit() {
      console.log('submit!');
    },
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    }
  }
}
</script>
<style lang="less" scoped>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

</style>
